<template>
  <div>
    <Table :columns="columns" :data="assertForm" height="300">
      <template slot-scope="{ row, index }" slot="assert_type">
        <Select v-model="assertForm[index]['assert_type']">
          <Option v-for="item in checkList" :value="item.key" :key="item.key">{{ item.name }}</Option>
        </Select>
      </template>
      <template slot-scope="{ row, index }" slot="check">
        <Input v-model="assertForm[index]['check']" :disabled="assertForm[index]['assert_type'] === 'status_code' || assertForm[index]['assert_type'] === 'response'"/>
      </template>
      <template slot-scope="{ row, index }" slot="expect">
        <Input v-model="assertForm[index]['expect']"/>
      </template>
      <template slot-scope="{ row, index }" slot="comparator">
        <Select v-model="assertForm[index]['comparator']">
          <Option v-for="item in relationList" :value="item.key" :key="item.key">{{ item.name }}</Option>
        </Select>
      </template>
      <template slot-scope="{ row, index }" slot="action">
        <Button type="error" size="small" @click="remove(index)">删除</Button>
      </template>
    </Table>
    <Button type="primary" style="display:block;margin:20px auto;width: 300px" @click="hanldeAdd">添加断言</Button>
  </div>
</template>

<script>
const checkList = [
  {
    key: "status_code",
    name: "状态码",
  },
  {
    key: "response_body",
    name: "响应体"
  },
  {
    key: "response",
    name: "响应"
  }
]
const relationList = [
  {
    key: "contains",
    name: "包含"
  },
  {
    key: "eq",
    name: "相等"
  },
    {
    key: "neq",
    name: "不相等"
  }
]
const columns = [
  {
    title: '断言类型',
    key: 'assert_type',
    slot: 'assert_type',
    width: 140
  },
  {
    title: '表达式',
    key: 'check',
    slot: 'check'
  },
  {
    title: '期望结果',
    key: 'expect',
    slot: 'expect'
  },
  {
    title: '期望关系',
    key: 'comparator',
    slot: 'comparator',
    width: 140
  },
  {
    title: '操作',
    slot: 'action',
    width: 120,
    align: 'center'
  }
]
export default {
  name: "asserts",
  props: {
    assert: Array
  },
  data() {
    return {
      columns,
      checkList,
      relationList,
      assertForm: [],
    }
  },
  watch: {
    'assert': {
      deep: true,
      immediate: true,
      handler: function (v) {
        this.assertForm = v
      }
    },
    'assertForm': {
      deep: true,
      immediate: true,
      handler: function (v) {
        console.log(v, '-----')
        this.$emit("changeAssert", v)
      },
    }
  },
  methods: {
    hanldeAdd() {
      this.assertForm.push({
        assert_type: "status_code",
        check: "",
        expect: '',
        comparator: ""
      })
    },
    remove(index) {
      this.assertForm.splice(index, 1);
    }
  }
}
</script>

<style scoped>
.ivu-form-item {
  margin-bottom: 0 !important;
}
</style>
